<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>chat online 移动版</title>

    <link rel="stylesheet" href="__LAYUI__/css/layui.mobile.css">

</head>
<body>
<script src="__JS__/jquery.js"></script>
<script src="__JS__/reconnecting-websocket.min.js"></script>
<script src="__LAYUI__/layui.js"></script>
<script>
    var user_id = "{$Think.session.user_id}";
    var user_name = "{$Think.session.user_name}";
    layui.config({
        version: true
    }).use(['mobile','jquery'], function(){
        var mobile = layui.mobile
            ,layim = mobile.layim
            ,layer = mobile.layer;
        var wsUri = "ws://chat.chenshiqi.com.cn:8081";
        //演示自动回复

        $.get('{:Url("/init_json")}','',function (re) {
            layim.config({
                init:re.data

                //上传图片接口
                ,uploadImage: {
                    url: '/upload/image' //（返回的数据格式见下文）
                    ,type: '' //默认post
                }

                //上传文件接口
                ,uploadFile: {
                    url: '/upload/file' //（返回的数据格式见下文）
                    ,type: '' //默认post
                }

                //,brief: true

                //扩展聊天面板工具栏
                ,tool: [{
                    alias: 'code'
                    ,title: '代码'
                    ,iconUnicode: '&#xe64e;'
                }]

                //扩展更多列表
                ,moreList: [{
                    alias: 'find'
                    ,title: '发现'
                    ,iconUnicode: '&#xe628;' //图标字体的unicode，可不填
                    ,iconClass: '' //图标字体的class类名
                },{
                    alias: 'share'
                    ,title: '分享与邀请'
                    ,iconUnicode: '&#xe641;' //图标字体的unicode，可不填
                    ,iconClass: '' //图标字体的class类名
                }]

                //,tabIndex: 1 //用户设定初始打开的Tab项下标
                ,isNewFriend: true //是否开启“新的朋友”
                ,isgroup: true //是否开启“群聊”
                //,chatTitleColor: '#c00' //顶部Bar颜色
                ,title: '小陈博客在线聊天' //应用名，默认：我的IM
            });
        });

        websocket = new ReconnectingWebSocket(wsUri);

        websocket.onopen = function (evt) {
            websocket.send(JSON.stringify({'type':'open','user_id':user_id}));
        };
        websocket.onclose = function (evt) {
//            onClose(evt)
        };
        websocket.onmessage = function (evt) {
            var data = JSON.parse(evt.data);
            var type = data.type || '';
            var send_data = data.send_data || {};
            console.log(JSON.stringify(send_data));
            switch (type) {
                case 'open':
                    layim.setFriendStatus(send_data.user_id, 'online');
                    break;
                case 'receiveMessage':
                    if(send_data.to.type == 'group'){
                        obj = {
                            username: send_data.mine.username
                            ,avatar: send_data.mine.avatar
                            ,id: send_data.to.id
                            ,type: send_data.to.type
                            ,content: send_data.mine.content
                        };
                    }else{
                        obj = {
                            username: send_data.mine.username
                            ,avatar: send_data.mine.avatar
                            ,id: send_data.mine.id
                            ,type: send_data.to.type
                            ,content: send_data.mine.content
                        };
                    }
                    layim.getMessage(obj);
                    break;
                case 'hide':
                    layim.setFriendStatus(send_data.user_id, 'offline');
                    break;
                case 'close':
                    layim.setFriendStatus(send_data.user_id, 'offline');
                    break;
            }
        };
        websocket.onerror = function (evt) {
//            onError(evt)
        };
        //创建一个会话
        /*
        layim.chat({
          id: 111111
          ,name: '许闲心'
          ,type: 'kefu' //friend、group等字符，如果是group，则创建的是群聊
          ,avatar: 'http://tp1.sinaimg.cn/1571889140/180/40030060651/1'
        });
        */


        //监听点击“新的朋友”
        layim.on('newFriend', function(){
            layim.panel({
                title: '新的朋友' //标题
                ,tpl: '<div style="padding: 10px;">自定义模版，{{d.data.test}}</div>' //模版
                ,data: { //数据
                    test: '么么哒'
                }
            });
        });

        //查看聊天信息
        layim.on('detail', function(data){
            console.log(data); //获取当前会话对象
            console.log(123);
            layim.panel({
                title: data.name + ' 聊天信息' //标题
                ,tpl: '<div style="padding: 10px;">自定义模版，<a href="http://www.layui.com/doc/modules/layim_mobile.html#ondetail" target="_blank">参考文档</a></div>' //模版
                ,data: { //数据
                    test: '么么哒'
                }
            });
        });

        //监听点击更多列表
        layim.on('moreList', function(obj){
            switch(obj.alias){
                case 'find':
                    layer.msg('自定义发现动作');

                    //模拟标记“发现新动态”为已读
                    layim.showNew('More', false);
                    layim.showNew('find', false);
                    break;
                case 'share':
                    layim.panel({
                        title: '邀请好友' //标题
                        ,tpl: '<div style="padding: 10px;">自定义模版，{{d.data.test}}</div>' //模版
                        ,data: { //数据
                            test: '么么哒'
                        }
                    });
                    break;
            }
        });

        //监听返回
        layim.on('back', function(){
            //如果你只是弹出一个会话界面（不显示主面板），那么可通过监听返回，跳转到上一页面，如：history.back();
        });

        //监听自定义工具栏点击，以添加代码为例
        layim.on('tool(code)', function(insert, send){
            insert('[pre class=layui-code]123[/pre]'); //将内容插入到编辑器
            send();
        });

        //监听发送消息
        layim.on('sendMessage', function(data){
            var To = data.to;
            console.log(JSON.stringify(data));
            websocket.send(JSON.stringify({'type':'sendMessage','data':data}));

//                if(To.type === 'group'){
//                    obj = {
//                        username: '模拟群员'+(Math.random()*100|0)
//                        ,avatar: layui.cache.dir + 'images/face/'+ (Math.random()*72|0) + '.gif'
//                        ,id: To.id
//                        ,type: 'group'
//                        ,content: autoReplay[Math.random()*9|0]
//                    }
//                }
        });

        //监听查看更多记录
        layim.on('chatlog', function(data, ul){
            console.log(data);
            layim.panel({
                title: '与 '+ data.name +' 的聊天记录' //标题
                ,tpl: '<div style="padding: 10px;">这里是模版，{{d.data.test}}</div>' //模版
                ,data: { //数据
                    test: 'Hello'
                }
            });
        });

        //模拟"更多"有新动态
        layim.showNew('More', true);
        layim.showNew('find', true);
    });
</script>
</body>
</html>
